
<template>
  <div :lay-id="domId"></div>
</template>
<script>
export default {
  name: "Transfer",
  props: {
    options: Object,
  },
  data: function () {
    return {
      domId: this.getID(),
      html:
        '<div style="text-align: center;margin-bottom: 20px"><div style="margin-top: 20px" ></div></div>',
    };
  },
  mounted: function () {
    this.initLayui();
    this.initTransfer();
  },
  methods: {
    initTransfer: function () {
      if (!this.checkIsNull(this.options.parentNodeId)) {
        var dom = this.parseDom(this.html);
        var transferHtml = dom.childNodes[0];
        transferHtml.id = this.domId;
        transferHtml.setAttribute("name", this.domId);
        if (this.checkIsNull($("#" + this.domId).html())) {
          this.render(transferHtml);
        } else {
          return;
        }
        if (typeof this.options.success === "function") {
          var newHtml = transferHtml.parentNode.parentNode;
          this.options.success();
          $("#" + this.options.parentNodeId).html(newHtml);
          this.render(transferHtml);
        } else {
          throw new Error("必须使用success回调方法获取html对象");
        }
      }
    },
    render: function (transferHtml) {
      var that = this;
      this.options.id = transferHtml.id;
      this.options.elem = "#" + transferHtml.id;
      layui.use("transfer", function () {
        var transfer = layui.transfer;
        transfer.render(that.options);
      });
    },
    getData: function (callBack) {
      var that = this;
      layui.use("transfer", function () {
        var transfer = layui.transfer;
        var data = transfer.getData(that.domId);
        if (typeof callBack === "function") {
          callBack(data);
        }
      });
    },
  },
};
</script>